@layout("/common/_container.html",{js:["/assets/modular/system/sysQnlKey/sysQnlKey.js"]}){
<script src="${ctxPath}/assets/common/libs/echarts/echarts.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echarts-liquidfill.js?v=${constants.getReleaseVersion()}"></script>
<div class="layui-body-header">
    <span class="layui-body-header-title">密钥池管理</span>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form toolbar">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <input id="status" class="layui-input" type="text" placeholder="状态"/>
                            </div>
                            <div class="layui-inline">
                            </div>
                            <div class="layui-inline">
                            </div>
                            <div class="layui-inline">
                            </div>
                            <div class="layui-inline">
                                <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
                            </div>
                        </div>
                    </div>
                    <div id="main" style="width: 600px;height:400px;margin-bottom: 20px"></div>

                    <table class="layui-table" id="sysQnlKeyTable" lay-filter="sysQnlKeyTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tableBar">
    @if(shiro.hasPermission("/role/remove")){
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    @}
</script>
<script type="text/javascript">

       // layui.use(['ax'], function () {
       //     var $ax = layui.ax;
       //     var ajax = new $ax(Feng.ctxPath + "/kmsPage/getChartsData", function (data) {
       //         Feng.success("归档路径",data);
       //     }, function (data) {
       //         Feng.success("归档路径:"+data.responseText);
       //     });
       //     ajax.start();
       // });
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(document.getElementById('main'));

   // myChart.setOption({
   //     title : {
   //         text: "密钥池使用情况"
   //     },
   //     series : [
   //         {
   //             name: '密钥池使用情况',
   //             type: 'pie',    // 设置图表类型为饼图
   //             radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
   //             // 自动显显示数据开始 start-----------------
   //             itemStyle: {
   //                 normal: {
   //                     label:{
   //                         show: true,
   //                         formatter: '{b} : {c} ({d}%)'
   //                     }
   //                 },
   //                 labelLine :{show:true}
   //             },
   //             data:[          // 数据数组，name 为数据项名称，value 为数据项值
   //                 {value:3, name:'已使用'},
   //                 {value:4096, name:'未使用'}
   //             ]
   //         }
   //     ]
   // })
</script>
@}